<template>
  <div class="footer-dialog">
    <div class="footer-in">
      <div class="flex-1">
        <div class="f-header">
          <span>{{ title }}</span>
          <div class="close">
            <i class="el-icon-circle-close" @click="close"></i>
          </div>
        </div>
        <div class="f-content">
          <div class="form">
            <div class="form-top">
              <div class="gender" @click="gender = !gender">
                <div class="gender-in" :class="{ active: gender }">
                  <span>{{ $t('common.form.mr') }}</span>
                  <em></em>
                </div>
                <div class="gender-in" :class="{ active: !gender }">
                  <span>{{ $t('common.form.ms') }}</span>
                  <em></em>
                </div>
              </div>
              <div class="chart">
                <div class="chart-in">
                  <img src="@/assets/images/index/Wechat.png" alt="" />
                  <div class="hover-box">
                    <img
                      src="http://bepai-sotenowe.oss.bepai.net/source/on-line/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div class="chart-in">
                  <img
                    src="@/assets/images/index/Telephone.png"
                    alt=""
                    @click="handleJumpWhatsapp"
                  />
                  <div class="hover-span">
                    <span>177 8203 0739</span>
                  </div>
                </div>
              </div>
            </div>
            <el-form inline :model="formData">
              <el-form-item :label="`*${$t('common.form.name')}:`">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item :label="`*${$t('common.form.phone')}:`">
                <el-input v-model="formData.telephone"></el-input>
              </el-form-item>
              <el-form-item :label="`*${$t('common.form.region')}:`">
                <el-input v-model="formData.country"></el-input>
              </el-form-item>
              <el-form-item :label="`*${$t('common.form.email')}:`">
                <el-input v-model="formData.email"></el-input>
              </el-form-item>
              <el-form-item :label="`${$t('common.form.vertical-market')}:`">
                <el-input v-model="formData.verticalMarket"></el-input>
              </el-form-item>
              <el-form-item :label="`*${$t('common.form.company')}:`">
                <el-input v-model="formData.company"></el-input>
              </el-form-item>
              <el-form-item :label="`${$t('common.form.howFind')}:`">
                <el-input v-model="formData.findWay"></el-input>
              </el-form-item>
              <el-form-item label="" class="full">
                <el-input
                  v-model="formData.question"
                  type="textarea"
                  :rows="6"
                  :placeholder="`${$t('common.form.talkToMe')}`"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button :loading="loading" @click="handleSubmit">
              {{ $t('common.submit') }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as api from '@/const/api'

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      gender: true,
      formData: {
        name: '', // 姓名
        telephone: '', // 手机
        email: '', // 邮箱
        company: '', // 公司
        country: '',
        verticalMarket: '', // 垂直市场
        findWay: '', // how to find
        question: '',
      },
      loading: false,
    }
  },
  computed: {
    ...mapState(['lang', 'isZh']),
    title() {
      const titleMap = {
        zh: '告诉我们您的需求，我们当地的销售代表会尽快联系您',
        en: 'Tell us what you need and one of our local sales representatives will contact you as soon as possible',
      }
      return titleMap[this.lang]
    },
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    async handleSubmit() {
      try {
        if (this.loading) {
          return
        }
        const flag = Object.entries(this.formData).every(([key, value]) => {
          if (!value && key !== 'question') {
            return false
          }
          return true
        })

        if (!flag) {
          throw new Error(this.$t('common.form.info'))
        }

        const params = {
          ...this.formData,
          userLang: this.lang,
          sex: this.gender ? 1 : 0,
          model: this.mode || '',
        }
        this.loading = true
        const { code, msg } = await this.$axios.$post(api.userQuestion, params)
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }

        this.$message.success(this.$t('common.form.success'))
        this.formData = {}
        this.close()
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleJumpWhatsapp() {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.footer-dialog {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;

  .footer-in {
    .pd(20, 24, 20, 24);
    .ft(16);

    background-color: #fff;
    width: 70vw;
    height: 90vh;
    margin: 5vh auto;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .flex-1 {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .f-header {
      .ft(26);
      .mg(0, 0, 0, 0);

      display: flex;
      justify-content: space-between;
      font-weight: bold;
    }

    .f-content {
      flex: 1;
      // overflow: auto;
      .mg(10, 0, 0, 0);
      .pd(10, 0, 20, 0);

      .form {
        .width(1200);

        margin: 0 auto;
        .pd(10, 0, 10, 0);

        .form-top {
          display: flex;
          justify-content: space-between;
          .pd(20, 0, 20, 0);
        }

        .gender {
          .ft(18);
          .mg(0, 0, 0, 0);

          display: flex;

          .gender-in {
            display: flex;
            align-items: center;
            cursor: pointer;

            &.active {
              span {
                color: #075fc4;
              }

              em {
                background-image: url(@/assets/images/index/selected-active.png);
              }
            }

            em {
              display: inline-block;
              .width(20);
              .height(20);

              background-image: url(@/assets/images/index/selected.png);
              background-size: 100% 100%;
              .mg(0, 20, 0, 4);
            }

            span {
              .mg(0, 00, 0, 0);
            }
          }
        }

        .chart {
          .pd(30, 0, 20, 0);

          .chart-in {
            position: relative;
            display: inline-block;
            cursor: pointer;
            .mg(0, 12, 0, 0);

            .hover-box {
              position: absolute;
              opacity: 0;
              transition: all 0.3s;
              top: 0;
              left: 50%;
              transform: translate(-50%);
              z-index: 20;

              &::after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-left: 0.416vw solid transparent;
                border-right: 0.416vw solid transparent;
                border-top: 0.3125vw solid #fff;
                position: absolute;
                bottom: -0.3125vw;
                left: 50%;
                transform: translate(-50%);
              }
            }

            .hover-span {
              .width(0);
              .height(0);
              .ft(0);

              position: absolute;
              opacity: 0;
              transition: all 0.3s;
              top: 0;
              left: 50%;
              background-color: #0261bc;
              color: #fff;
              font-weight: bold;
              transform: translate(-50%, 0);
              text-align: center;
              border-radius: 0.3125vw;

              &::after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-left: 0.416vw solid transparent;
                border-right: 0.416vw solid transparent;
                border-top: 0.3125vw solid #fff;
                position: absolute;
                bottom: -0.3125vw;
                left: 50%;
                transform: translate(-50%);
              }
            }

            &:hover {
              .hover-box {
                .width(128);
                .height(128);
                .top(-140);

                opacity: 1;

                img {
                  .width(128);
                  .height(128);

                  border-radius: 4px;
                }
              }

              .hover-span {
                .width(160);
                .height(30);
                .top(-40);
                .ft(18);

                opacity: 1;

                span {
                  .width(160);
                  .height(30);

                  border-radius: 4px;
                }
              }
            }
          }

          img {
            .width(32);
            .height(32);
            .mg(0, 0, 0, 0);
          }
        }

        :deep(.el-form) {
          font-size: 0;
          color: #333;

          .el-form-item {
            width: 50%;
            .mg(0, 0, 15, 0);

            border-bottom: 1px solid #333;

            &:nth-child(2n + 1) {
              width: 45%;
              margin-right: 5%;
            }

            .el-form-item__label {
              .ft(18);
            }

            .el-form-item__content {
              .width(380);

              .el-input__inner {
                border: none;
              }
            }
          }

          .full {
            width: 100%;
            border: none;

            .el-form-item__content {
              width: 100%;

              .el-textarea__inner {
                width: 100%;
                border: 1px solid #333;
                .ft(18);
              }
            }
          }
        }

        .el-button {
          .width(344);
          .height(60);
          .lineH(60);

          background: #0261bc;
          color: #fff;
          border: none;
          padding: 0;
          margin: 40px auto 0 auto;
          display: block;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }

    h1 {
      .ft(18);
      .mg(20, 0, 6, 0);
    }
  }

  .close {
    .width(30);
    .height(30);
    .ft(30);
    .mg(0, 0, 0, 0);

    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }
}
</style>
